<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /课程详情 开始 -->
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="/" title class="c-999 fsize14">首页</a>
        \
        <a href="/course/" title class="c-999 fsize14">课程列表</a>
        \
        <span class="c-333 fsize14">{{course.title}}</span>
      </section>
      
      <!-- /课程封面介绍 -->
      <el-tabs v-model="activeName">
        
          <el-tab-pane label="课程详情" name="detail"><Detail :course="course" :chapterVos="chapterVos" :isbuy="isbuy"></Detail></el-tab-pane>
          <el-tab-pane label="课程评论" name="comment"><Comments :isbuy="isbuy" :courseId="course.id" :teacherId="course.teacherId"></Comments></el-tab-pane>
        
      </el-tabs>

    </section>  
    
  </div>
</template>

<script>
import courseApi from '@/api/course'

import Detail from './detail'
import Comments from './CommentVue'

export default {
  data(){
    return{
      id:'',
      course:{},
      chapterVos:[],
      allComments:[],
      courseId:'',
      isbuy:false,
      activeName: 'detail'
    }
  },
  created(){
    this.getCourseFrontInfo()
  },
  components:{
    Detail,
    Comments
  },
  methods:{
    //获取课程的详细信息
    getCourseFrontInfo(){
      if(this.$route.params && this.$route.params.id){
        courseApi.getCourseFrontInfo(this.$route.params.id)
          .then(response => {
              this.course = response.data.data.eduCourse
              this.chapterVos = response.data.data.chapterVos
              this.courseId = this.$route.params.id
              this.isbuy = response.data.data.isBuy
          })
      }else{
        this.$router.push({path:'/course'})
      }
    }
  }

};
</script>
